<script setup lang="ts">
import { AddBoxOutlined } from "@vicons/material";
import { DataTableColumns, NButton, NFormItem, NInput, NSelect } from 'naive-ui';
import { h, inject, ref, watch } from 'vue';
import { v4 as uuidv4 } from 'uuid';
const steps = inject('steps') as any
function createData(): any[] {
    console.log()
    return steps?.data?.value?.step2?.wy ?? []
}

const machine_room_nameRef = ref(null)
watch(() => steps, (newVal: any) => {
    console.log(newVal)
    machine_room_nameRef.value = newVal?.data?.value?.step1?.machine_room_name
}, { deep: true })

const data = ref(createData())
const createColumns = (): DataTableColumns<any> => [
    {
        title: '局址',
        key: 'location',
        align: 'center',
        rowSpan: (rowData, rowIndex) => {
            return rowData?.col?.[0] === rowIndex ? rowData?.col?.[1] - rowData?.col?.[0] + 1 : 0
        },
        render: () => {
            return machine_room_nameRef.value
        }
    },
    {
        title: '机架编号',
        key: 'code',
        width: 150,
        render(row, index) {
            return h(NFormItem, {
                path: `wy1[${index}].code`,
                rule: {
                    required: true,
                    message: '请输入机架编号',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.code,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入机架编号',
                        onUpdateValue(v) {
                            data.value[index].code = v
                        },
                        onInput(v) {
                            data.value[index].code = v
                        }
                    })
                ]
            })
        },
        rowSpan: (rowData, rowIndex) => {
            return rowData?.col?.[0] === rowIndex ? rowData?.col?.[1] - rowData?.col?.[0] + 1 : 0
        },
    },
    {
        title: '本期新增设备',
        key: 'manufactor',
        align: 'center'
    },
    {
        title: '网元名称',
        key: 'name',
        align: 'center',
        rowSpan: (rowData, rowIndex) => {
            return rowData?.col?.[0] === rowIndex ? rowData?.col?.[1] - rowData?.col?.[0] + 1 : 0
        },
    },
    {
        title: '本期功耗（kw）',
        key: 'kw',
        align: 'center',
        width: 150,
        render(row, index) {
            return h(NFormItem, {
                path: `wy1[${index}].kw`,
                rule: {
                    required: true,
                    message: '请输入机架功耗',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.kw,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入机架功耗',
                        onUpdateValue(v) {
                            data.value[index].kw = v
                        },
                        onInput(v) {
                            data.value[index].kw = v
                        }
                    })
                ]
            })
        },
    },
    {
        title: '供电方式',
        key: 'power',
        align: 'center',
        width: 150,
        rowSpan: (rowData, rowIndex) => {
            return rowData?.col?.[0] === rowIndex ? rowData?.col?.[1] - rowData?.col?.[0] + 1 : 0
        },
        render(row, index) {
            return h(NFormItem, {
                path: `wy1[${index}].power`,
                rule: {
                    required: true,
                    message: '请输入供电方式',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.power,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入供电方式',
                        onUpdateValue(v) {
                            data.value[index].power = v
                        },
                        onInput(v) {
                            data.value[index].power = v
                        }
                    })
                ]
            })
        },
    },
    {
        title: '单机柜空开需求（双边）',
        key: 'demand',
        align: 'center',
        width: 150,
        render(row, index) {
            return h(NFormItem, {
                path: `wy1[${index}].demand`,
                rule: {
                    required: true,
                    message: '请输入单机柜空开需求',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.demand,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入单机柜空开需求',
                        onUpdateValue(v) {
                            data.value[index].demand = v
                        },
                        onInput(v) {
                            data.value[index].demand = v
                        }
                    })
                ]
            })
        },
    },
    {
        title: '取电方式',
        key: 'power_p',
        align: 'center',
        width: 150,
        rowSpan: (rowData, rowIndex) => {
            return rowData?.col?.[0] === rowIndex ? rowData?.col?.[1] - rowData?.col?.[0] + 1 : 0
        },
        render(row, index) {
            return h(NFormItem, {
                path: `wy1[${index}].power_p`,
                rule: {
                    required: true,
                    message: '请输入取电方式',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.power_p,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入取电方式',
                        onUpdateValue(v) {
                            data.value[index].power_p = v
                        },
                        onInput(v) {
                            data.value[index].power_p = v
                        }
                    })
                ]
            })
        },
    },
    {
        title: '电源系统',
        key: 'power_s',
        align: 'center',
        width: 150,
        rowSpan: (rowData, rowIndex) => {
            return rowData?.col?.[0] === rowIndex ? rowData?.col?.[1] - rowData?.col?.[0] + 1 : 0
        },
        render(row, index) {
            return h(NFormItem, {
                path: `wy1[${index}].power_s`,
                rule: {
                    required: true,
                    message: '请输入电源系统',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.power_s,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入电源系统',
                        onUpdateValue(v) {
                            data.value[index].power_s = v
                        },
                        onInput(v) {
                            data.value[index].power_s = v
                        }
                    })
                ]
            })
        },
    },
    {
        title: '电源是否满足',
        key: 'satisfy',
        align: 'center',
        rowSpan: (rowData, rowIndex) => {
            return rowData?.col?.[0] === rowIndex ? rowData?.col?.[1] - rowData?.col?.[0] + 1 : 0
        },
        render(row, index) {
            const options = [
                {
                    label: '满足',
                },
                {
                    label: '不满足',
                }
            ]
            return h(NFormItem, {
                path: `wy1[${index}].satisfy`,
                rule: {
                    required: true,
                    message: '请选择电源是否满足',
                    trigger: ['blur', 'select', 'input'],
                }
            }, {
                default: () => [
                    h(NSelect, {
                        value: row.satisfy,
                        bordered: false,
                        options: options?.map(el => {
                            return {
                                label: el.label,
                                value: el.label
                            }
                        }),
                        clearable: true,
                        class: 'bg-transparent',
                        placeholder: '请选择电源是否满足',
                        onChange: (v) => {
                            data.value[index].satisfy = v
                        },
                    })
                ]
            })
        },
    }
]
const emit = defineEmits(['update:value'])
watch(() => data, (data) => {
    console.log(data.value)
    emit('update:value', data.value)
}, {
    deep: true
})

const formValue = inject("formValue")

const addRow = () => {
    const uuidStr = uuidv4();
    if (!formValue.num) {
        formValue.num = 1
    }
    formValue.num += 1;
    data.value.push({
        key: data.value.length - 1,
        hardware: '服务器AB345A1',
        nature: '新建',
        cabinet: '600×1100×2200（新增机柜）',
        num: '2',
        power: '1800',
        col: [data.value.length, data.value.length + 3 - 1],
        manufactor: '某司',
        uuid: uuidStr
    }, {
        key: data.value.length,
        name: '',
        hardware: '交换机ABX123456X-12DU-SD',
        nature: '新建',
        cabinet: '600×1100×2200（新增机柜）',
        num: '2',
        power: '1800',
        manufactor: '某司',
        uuid: uuidStr
    }, {
        key: data.value.length + 1,
        name: '',
        hardware: '防火墙LEabcsEF2000-AB-CD',
        nature: '新建',
        cabinet: '600×1100×2200（新增机柜）',
        num: '2',
        power: '1800',
        manufactor: '某司',
        uuid: uuidStr
    })
}

</script>

<template>
    <n-data-table :columns="createColumns()" :single-line="false" :bordered="true" :data="data" />
</template>